<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                        serif: ['Georgia', 'Cambria', 'serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .card-hover {
                @apply hover:shadow-lg hover:-translate-y-1 transition-all duration-300;
            }
            .btn-hover {
                @apply transform hover:-translate-y-0.5 transition-all duration-300;
            }
        }
    </style>

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
</head>

<body class="bg-slate-50 font-sans text-slate-800">
<!-- 导航栏 -->
<nav class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50 transition-custom">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-3">
            <img src="pic/logo2.jpg" alt="博客系统logo" class="h-10 w-10 rounded-full object-cover shadow-md transform hover:scale-105 transition-custom">
            <span class="blog-title text-xl font-bold text-primary text-shadow">我的博客系统</span>
        </div>

        <div class="hidden md:flex items-center space-x-6">
            <a href="blog_list.html" class="nav-span text-slate-600 hover:text-primary transition-custom flex items-center gap-1.5">
                <i class="fa fa-home"></i> 主页
            </a>
            <a href="blog_edit.html" class="nav-span text-slate-600 hover:text-primary transition-custom flex items-center gap-1.5">
                <i class="fa fa-pencil"></i> 写博客
            </a>
            <a href="#" onclick="logout()" class="nav-span text-slate-600 hover:text-red-500 transition-custom flex items-center gap-1.5">
                <i class="fa fa-sign-out"></i> 注销
            </a>
        </div>

        <!-- 移动端菜单按钮 -->
        <button class="md:hidden text-slate-600 hover:text-primary transition-custom">
            <i class="fa fa-bars text-xl"></i>
        </button>
    </div>
</nav>

<!-- 主内容区 -->
<div class="container mx-auto px-4 pt-24 pb-16">
    <div class="flex flex-col md:flex-row gap-8">
        <!-- 左侧个人信息卡片 -->
        <div class="left md:w-1/4 lg:w-1/5">
            <div class="card bg-white rounded-xl shadow-md overflow-hidden card-hover sticky top-24">
                <div class="bg-gradient-to-r from-primary/90 to-primary p-6"></div>
                <div class="px-6 pb-6 -mt-12">
                    <img src="pic/doge.jpg" alt="用户头像" class="w-24 h-24 rounded-full border-4 border-white mx-auto shadow-md object-cover transform hover:scale-105 transition-custom">
                    <h3 class="text-center text-xl font-bold mt-4 mb-2 user-name"></h3>
                    <a href="#" class="flex items-center justify-center gap-1.5 text-primary hover:text-primary/80 transition-custom py-2">
                        <i class="fa fa-github"></i> GitHub 地址
                    </a>

                    <div class="grid grid-cols-2 gap-4 mt-6 pt-6 border-t border-slate-100">
                        <div class="text-center">
                            <div class="text-2xl font-bold text-primary blog-count">0</div>
                            <div class="text-slate-500 text-sm mt-1">文章</div>
                        </div>
                        <div class="text-center">
                            <div class="text-2xl font-bold text-primary category-count">0</div>
                            <div class="text-slate-500 text-sm mt-1">分类</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧博客内容 -->
        <div class="right flex-1 max-w-3xl mx-auto">
            <div class="content bg-white rounded-xl shadow-md overflow-hidden" id="blog-content">
                <!-- 博客标题区域 -->
                <div class="p-6 md:p-8 border-b border-slate-100">
                    <h1 class="title text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-slate-800 leading-tight"></h1>
                    <div class="date mt-4 text-slate-500 text-sm flex items-center">
                        <i class="fa fa-calendar-o mr-2"></i>
                        <span id="publish-date"></span>
                    </div>
                </div>

                <!-- 博客内容区域 -->
                <div class="p-6 md:p-8 detail-content">
                    <div class="detail" id="detail" style="background: transparent;"></div>
                </div>

                <!-- 操作按钮区域 -->
                <div class="p-6 md:p-8 border-t border-slate-100 bg-slate-50/50">
                    <div class="operating flex flex-wrap gap-4"></div>
                    <div class="mt-6">
                        <a href="blog_list.html" class="inline-flex items-center text-primary hover:text-primary/80 font-medium transition-custom group">
                            <i class="fa fa-arrow-left mr-1"></i>
                            返回博客列表
                        </a>
                    </div>
                </div>
            </div>

            <!-- 加载状态 -->
            <div class="flex justify-center items-center py-24 hidden" id="loading-indicator">
                <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
            </div>

            <!-- 错误状态 -->
            <div class="hidden bg-white rounded-xl p-8 text-center shadow-sm" id="error-message">
                <i class="fa fa-exclamation-triangle text-amber-500 text-3xl mb-4"></i>
                <h3 class="text-xl text-slate-700">加载失败</h3>
                <p class="text-slate-500 mt-2">无法加载博客内容，请稍后重试</p>
                <button onclick="getBlogDetail()" class="mt-4 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-custom">
                    <i class="fa fa-refresh mr-1"></i> 重新加载
                </button>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="blog-editormd/lib/marked.min.js"></script>
<script src="blog-editormd/lib/prettify.min.js"></script>
<script src="blog-editormd/editormd.js"></script>
<script src="js/common.js"></script>
<script>
    // 页面滚动效果
    window.addEventListener('scroll', function() {
        const nav = document.querySelector('nav');
        if (window.scrollY > 10) {
            nav.classList.add('py-2', 'shadow');
            nav.classList.remove('py-3');
        } else {
            nav.classList.add('py-3');
            nav.classList.remove('py-2', 'shadow');
        }
    });

    // 显示博客作者信息
    let url = "/user/getAuthorInfo" + location.search;
    getUserInfo(url);

    // 删除博客 - 保持旧版接口
    function deleteBlog(id) {
        if (confirm('确定要删除这篇博客吗？此操作不可撤销。')) {
            $.ajax({
                type: "post",
                url: "/blog/delete?blogId=" + id,
                success: function (result) {
                    if (result != null && result.code == 200 && result.data) {
                        alert("博客删除成功");
                        location.href = "blog_list.html";
                    } else {
                        alert("删除失败: " + (result.errMsg || "未知错误"));
                    }
                },
                error: function() {
                    alert("网络错误，删除失败");
                }
            });
        }
    }

    // 获取博客详情 - 保持旧版接口逻辑
    function getBlogDetail() {
        // 显示加载状态
        document.getElementById('loading-indicator').classList.remove('hidden');
        document.getElementById('blog-content').classList.add('hidden');
        document.getElementById('error-message').classList.add('hidden');

        $.ajax({
            type: "get",
            url: "/blog/getBlogDetail" + location.search,
            success: function (result) {
                document.getElementById('loading-indicator').classList.add('hidden');
                document.getElementById('blog-content').classList.remove('hidden');

                if (result.code == 200) {
                    let blog = result.data;
                    // 填充博客内容
                    $(".title").text(blog.title);
                    $("#publish-date").text(blog.createTime);

                    // 渲染Markdown内容 - 保持旧版的直接调用方式
                    editormd.markdownToHTML("detail", {
                        markdown: blog.content
                    });

                    // 判断是否显示删除和编辑按钮 - 保持旧版逻辑
                    let loginUserId = localStorage.getItem("loginUserId");
                    if (blog.userId == loginUserId) {
                        let finalHtml = `
                                <button onclick="window.location.href='blog_update.html?blogId=${blog.id}'"
                                        class="bg-primary hover:bg-primary/90 text-white px-5 py-2.5 rounded-lg transition-custom flex items-center gap-1.5 shadow-sm btn-hover">
                                    <i class="fa fa-pencil"></i> 编辑
                                </button>
                                <button onclick="deleteBlog(${blog.id})"
                                        class="bg-red-500 hover:bg-red-600 text-white px-5 py-2.5 rounded-lg transition-custom flex items-center gap-1.5 shadow-sm btn-hover">
                                    <i class="fa fa-trash"></i> 删除
                                </button>
                            `;
                        $(".operating").html(finalHtml);
                    }
                } else {
                    document.getElementById('blog-content').classList.add('hidden');
                    document.getElementById('error-message').classList.remove('hidden');
                }
            },
            error: function() {
                document.getElementById('loading-indicator').classList.add('hidden');
                document.getElementById('blog-content').classList.add('hidden');
                document.getElementById('error-message').classList.remove('hidden');
            }
        });
    }

    // 更新用户信息显示（保持与旧版一致）
    function updateUserInfo(user) {
        if (user) {
            $('.user-name').text(user.userName || '用户名称');
            $('.blog-count').text(user.blogCount || '0');
            $('.category-count').text(user.categoryCount || '0');
        }
    }

    // 页面加载时直接调用获取博客详情（与旧版一致）
    getBlogDetail();
</script>
</body>

</html>
